<template>
  <div id="tab_wrap">
    <el-tabs v-model='activeIndexPath' type='border-card' closable @tab-click='tabClick' @tab-remove="tabRemove">
      <template v-for="(item, index) in openTabs">
        <el-tab-pane v-if="index==0" :key="item.path" :name="item.path">
          <span slot="label"><i class="fa fa-home"></i></span>
        </el-tab-pane>
        <el-tab-pane v-if="index!=0" :key="item.path" :label="item.name" :name="item.path"></el-tab-pane>
      </template>
    </el-tabs>
  </div>
</template>

<script>
  import { mapGetters, mapActions } from 'vuex'
  export default{
    data(){
        return {
        }
    },
    computed: {
      ...mapGetters({
        openTabs: 'getOpenTabs',
      }),
      activeIndexPath:{
        get(){
          return this.$store.getters.getActiveIndexPath
        },
        set(val){
          this.$store.dispatch("setActiveIndexPath",val)
        }
      }
    },
    methods: {
      ...mapActions({
        setOpenTabs: 'setOpenTabs',
        setActiveIndexPath: 'setActiveIndexPath',
        setDeleteTabs: 'setDeleteTabs',
        replaceOpenTab: 'replaceOpenTab'
      }),
      tabClick(){
        for(let i=0; i < this.openTabs.length; i++){
          if( this.openTabs[i].path == this.activeIndexPath){
            this.$router.push({path:this.openTabs[i].path, query:this.openTabs[i].query})
          }
        }


      },
      tabRemove(targetName){
        if(targetName == "/home"){
          return;
        }
        this.setDeleteTabs(targetName);
        if(this.activeIndexPath == targetName){
          if(this.openTabs && this.openTabs.length > 1){
            this.setActiveIndexPath(this.openTabs[this.openTabs.length-1].path);
            this.$router.push({path: this.activeIndexPath, query:this.openTabs[this.openTabs.length-1].query.id});
          }else{
            this.$router.push({path: "/home"});
          }
        }
      }
    },
    mounted(){
      if(this.openTabs.path !="/index"){
        this.$router.push(this.activeIndexPath);
      };
    },
    watch:{
      '$route'(to,from){
        var fromRouterLen = from.matched.length;
        var toRouterLen = to.matched.length;
        var flag = false;
        for(let i=0; i < this.openTabs.length; i++){
          if(this.openTabs[i].path == to.path){
            this.setActiveIndexPath(to.path);
            flag = true;
            break;
          }
          if(this.openTabs[i].name == to.name){
            this.setActiveIndexPath(this.openTabs[i].path);
            flag = true;
            break;
          }
        }
        if(fromRouterLen > 2 && toRouterLen > 2 && from.matched[2].name == to.matched[2].name){
         for(let i=0; i < this.openTabs.length; i++){
           if(this.openTabs[i].path === from.path){
             this.replaceOpenTab({to:to,index:i});
             this.setActiveIndexPath(this.openTabs[i].path);
             flag = true;
           }
         }
        }
        if(!flag){
          let activeName = to.matched[2].name
//          console.log(to.matched[2].name)
          if(to.query){
            this.setOpenTabs({path: to.path, name: activeName, query:{id:to.query.id}});
          }else{
            this.setOpenTabs({path: to.path, name: activeName});
          }
          this.setActiveIndexPath(to.path);
        }
      }
    }
  }
</script>
<style lang="scss" scope type="text/css" src="@/assets/css/components/tab.scss">
</style>
